@use "sass:color";
@import "../../../../style/app/default/theme";
@import "../../../popup/style/default";
@import "../../../toast/style/default";
.lexmis-ModalContainer{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:$-modal-index;
	pointer-events:none;
}
.lexmis-Modal.lexmis-Popup{
	&.v-enter-active{
		>.lexmis_content{
			animation:ModalZoomFade $-popup-transition forwards;
		}
	}
	&.v-leave-active{
		>.lexmis_content{
			animation:ModalZoomFade $-popup-transition forwards reverse;
		}
	}
	>.lexmis_content{
		width:320px;
		box-shadow:$-modal-box-shadow;
		border-radius:$-modal-border-radius;
		font-size:$-title-font-size;
		display: flex;
		flex-direction: column;
		overflow:hidden;
		>.lexmis_head{
			flex-shrink:0;
			@include text-ellipsis;
			color:$-title-color;
			text-align:center;
			padding:$-modal-vertical-gap $-modal-horizontal-gap 0;
		}
		>.lexmis_body{
			flex-grow:1;
			//flex-basis:0;
			position:relative;
			overflow:hidden;
			display:flex;
			>.lexmis_content{
				width:100%;
				color:$-content-color;
				font-size:$-content-font-size;
				white-space:pre-wrap;
				word-break:break-all;
				overflow:auto;
				padding:$-modal-vertical-gap $-modal-horizontal-gap;
			}
			.lexmis_modal_spinner{
				font-size:$-loading-size;
				color:$-primary-color;
			}
		}
		>.lexmis_foot{
			flex-shrink:0;
			height:$-modal-foot-height;
			display:flex;
			>.lexmis_confirm,>.lexmis_close{
				border-top:1px solid $-border-color;
				flex-grow:1;
				flex-basis:0;
				user-select:none;
				display:flex;
				justify-content:center;
				align-items:center;
				&:not(.lexmis--loading):active{
					background: color.scale(#fff,$lightness:-6%);
				}
				>.lexmis_modal_spinner{
					font-size:$-title-font-size + 2;
					color:$-primary-color;
				}
			}
			>.lexmis_confirm{
				color:$-error-color;
			}
			>.lexmis_close{
				color:$-title-color;
				border-left:1px solid $-border-color;
			}
		}
	}
}
